<template>
  <div style="height: 100%; overflow-y: auto;">
    <a-card class="min-h-[68px] rounded my-[10px]" :body-style="{ padding: '12px 30px', height: '1000px' }"
            :bordered="false">
      <!-- 正文头部 -->
      <div slot="title" style="display: flex; justify-content: space-between;">
        <a-space>
          <div class="ty"></div>
          {{ pageTitle }}DPIA评估列表
        </a-space>
        <!-- 头部返回列表功能 -->
        <a-button class="border-none" icon="rollback" @click="rollback">返回列表</a-button>
      </div>
      <!-- 正文头部 -->
      <div slot="title" style="margin: 30px 10px 0px 20px;">
        <div style="display: flex; justify-content: space-between;">
          <a-space>
            <div class="ty"></div>
            BBA 20th assciate
          </a-space>
          <!-- 查看详情 -->
        </div>
        <div style="margin-top: 10px;">
          <a-progress v-bind:width="400" stroke-linecap="square" :percent="50" :steps="3"/>
        </div>
      </div>
      <!-- 中间部分 -->
      <div :gutter="10" style="display: flex;">
        <div class="card-left" :span="3">
          <p class="left-title">问题列表</p>
          <ul style="padding-left: 30px;">
            <li>1.Scenario</li>
            <li>2.Minimization and Necessity Test</li>
            <li>3.Collectiong</li>
            <li>4.Transfer</li>
            <li>5.Using,processing,providing,disclose</li>
            <li>6.Storing & Erasing</li>
            <li>7.Data Subject Right</li>
            <li>8.OutSouring</li>
            <li>9.Sharing</li>
            <li>10.Data Megering</li>
            <li>11.Automated Decision Making</li>
            <li>12.Cross-border Data Transfer</li>
            <li>13.Mobile App</li>
          </ul>
        </div>
        <!-- 右边答题-->
        <anser :span="7"/>
      </div>
      <!-- 下方按钮 -->
      <Button/>
    </a-card>
  </div>
</template>

<script>
import Anser from './anser.vue'
import Button from './button.vue'

export default {
  components: {
    Anser,
    Button,
  },
  data() {
    return {
      current: '',
      value: '',
    }
  },
  methods: {
    rollback() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="less" scoped>
.border-none {
  border: 1px solid rgba(36, 89, 229, 1);
}

.card-left {
  /*rectangle copy 4备份 87*/
  margin: 20px;
  color: #000;
  left: 339px;
  top: 287px;
  width: 388px;
  height: 428px;
  opacity: 0.5;
  border-radius: 2px;
  background: rgba(213, 229, 255, 1);

  // width: 300px;
  // border: 1px solid #DDD;
  ul li {
    padding: 3px;
  }
}

.left-title {
  font-weight: bold;
  color: #000;
  width: 100%;
  line-height: 40px;
  padding: 0 10px;
  opacity: 0.6;
  background: rgb(32, 72, 137);
  border-bottom: 1px solid #DDD;
}

p {
  color: #000;
}
</style>